<template>
  <el-dialog :title="title" custom-class="warning-dialog" :close-on-click-modal="false" :modal="false"
    :visible.sync="open" :before-close="handleClose">
    <!-- 查询条件 -->
    <div class="search-box" ref='searchBox'>
      <div class="search-box-item" v-if="!formData.partId">
        <el-select v-model="query.equipmentId" placeholder="请选择告警设备" filterable clearable default-first-option
          size='mini' popper-class='default-select-popper' @change="getList">
          <el-option v-for="item in equipmentList" :key="item.equipmentId" :label="item.equipmentName"
            :value="item.equipmentId">
            {{ item.equipmentName }}
          </el-option>
        </el-select>
      </div>
      <div class="search-box-item" v-if="!formData.partId">
        <el-select v-model="query.sourceId" placeholder="请选择告警类型" filterable clearable default-first-option size='mini'
          popper-class='default-select-popper' @change="getList">
          <el-option v-for="item in sourceList" :key="item.sourceId" :label="item.sourceName" :value="item.sourceId">
            {{ item.sourceName }}
          </el-option>
        </el-select>
      </div>
      <div class="search-box-item">
        <el-date-picker v-model="datetimerange" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" popper-class="custom-daterange-popper"
          @change="getList">
        </el-date-picker>
      </div>
      <div class="search-box-item">
        <el-button class="search-btn" @click="handleReset">重置</el-button>
        <el-button class="search-btn" @click="getList">查询</el-button>
      </div>
    </div>

    <!-- 表格数据 -->
    <el-table ref="table" :data="tableData" cell-class-name="table-cell-custom"
      header-cell-class-name="table-herder-custom" highlight-current-row @row-dblclick="dblclick" :height="tableHeight"
      size="small">
      <el-table-column label="告警设备" prop="equipmentName"> </el-table-column>
      <el-table-column label="告警通道" prop="partName"> </el-table-column>
      <el-table-column label="告警类型" prop="sourceName"> </el-table-column>
      <el-table-column label="告警时间" prop="createDate" align="center" min-width="100">
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="query.current" :limit.sync="query.size" align="left"
      popperClass="default-select-popper" @pagination="getList" />
    <div slot="footer" class="dialog-footer">
      <!-- <el-button @click="handleCommit()" size="small">确 定</el-button> -->
      <!-- <el-button @click="handleClose" size="small">取 消</el-button> -->
    </div>
  </el-dialog>
</template>

<script>
import { getWarningPage, getEquipmentList, getSourceList } from '@/api/warning'
import Pagination from '@/components/Pagination'

export default {
  props: {
    open: Boolean,
    formData: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  components: {
    Pagination,
  },
  data() {
    return {
      title: '告警信息',
      total: 0, // 条数
      query: { current: 1, size: 20, equipmentId: '', sourceId: '' },
      datetimerange: [],
      tableData: [],
      selectedRows: [],
      tableHeight: '0',
      equipmentList: [],
      sourceList: [],
    }
  },
  methods: {
    // 日期格式化
    formatDate(row) {
      return row.createTime.substr(0, 19).replace('T', ' ')
    },
    // 双击
    dblclick(row) {},
    // 重置查询
    handleReset() {
      this.query = { current: 1, size: 20, equipmentId: '', sourceId: '' }
      this.datetimerange = []
      this.getList()
    },
    // 确定
    handleCommit() {
      this.handleClose()
      this.$emit('commit', this.selectedRows)
    },
    // 关闭或取消
    handleClose() {
      console.log('handleClose')
      this.$emit('update:open', false)
    },
    //类型下拉框
    handleGetSourceList() {
      getSourceList().then((res) => {
        this.sourceList = res.data
      })
    },
    //查询框-设备列表
    handleEquipmentList() {
      getEquipmentList().then((res) => {
        this.equipmentList = res.data
      })
    },
    // 获取告警列表
    getList() {
      if (this.datetimerange && this.datetimerange.length > 0) {
        this.query.startDate = this.datetimerange[0]
        this.query.endDate = this.datetimerange[1]
      } else {
        this.query.startDate = undefined
        this.query.endDate = undefined
      }
      if (this.formData.partId) this.query.partId = this.formData.partId
      getWarningPage(this.query).then((res) => {
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    resizeTable() {
      if (this.$refs.searchBox) {
        let height = this.$refs.searchBox.getBoundingClientRect().height + 45
        this.tableHeight = `calc(100% - ${height}px)`
      }
    },
  },
  mounted() {
    this.getList()
    this.handleEquipmentList()
    this.handleGetSourceList()
    this.$nextTick(function () {
      //必须在dom渲染完成后在获取不然会出现获取dom的数值错误的情况，
      this.resizeTable()
    })
    window.addEventListener('resize', this.resizeTable)
  },
  destroyed() {
    window.removeEventListener('resize', this.resizeTable)
  },
}
</script>

<style lang="scss" scoped>
@import '~@/assets/scss/warning_dialog.scss';
</style>



